<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>EJS</title>
    <link rel='stylesheet' href='../stylesheets/style.css' />
    <script src="../lib/jquery/dist/jquery.min.js"></script>
</head>
<body>
    <button id="test">全部用户</button>
    <table id="allUsersTable" border="1">
        <thead>
            <tr>
                <th>pid</th>
                <th>id</th>
                <th>name</th>
                <th>address</th>
                <th>age</th>
                <th>icon</th>
                <th>grade</th>
                <th>title</th>
                <th>creationTime</th>
                <th>sex</th>
                <th>cardid</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
    <form id = "insertForm1">
        <input type="text" name="userId" placeholder="id" value="">
        <button id="btn" type="button">查找</button>
    </form>

    <form id = "insertForm2">
        <input type="number" name="userAge" placeholder="age" value="">
        <input type="text" name="userAddress" placeholder="address" value="">
        <input type="text" name="userIcon" placeholder="icon" value="">
        <input type="text" name="userName" placeholder="name" value="">
        <input type="number" name="cardid" placeholder="carid" value="">
        <input type="radio" name="sex"  value="男">男
        <input type="radio" name="sex" value="女">女
        <select name="userGrade">
            <option value="1">一级代理</option>
            <option value="2">二级代理</option>
            <option value="3">三级代理</option>
        </select>
        <button id="btn1" type="button">查找</button>
    </form>
</body>

</html>
<script type="text/javascript">
    $(function(){
        $("#test").on("click",function(){
            $.ajax({
                url: 'user/findAllAction',
                data:{
                    name:"11"
                },
                method: 'post',
                dataType: 'json',
                success:function(res){
                    $('#allUsersTable tbody').html("")
                    $.map(res,function(v,i){
                        $('#allUsersTable').append(
                            "<tr>" +
                                "<td><input onchange= 'updateOneInfo(this)' value='"+(v.pid||"")+"'></td>"+
                                "<td><input value='"+v.id+"'></td>"+
                                "<td><input onchange= 'updateOneInfo(this)' value='"+v.name+"'></td>"+
                                "<td><input value='"+v.address+"'></td>"+
                                "<td><input value='"+v.age+"'></td>"+
                                "<td><input value='"+v.icon+"'></td>"+
                                "<td><input value='"+v.grade+"'></td>"+
                                "<td><input value='"+(v.title||"")+"'></td>"+
                                "<td><input value='"+v.creationTime+"'></td>"+
                                "<td><input value='"+(v.sex||"")+"'></td>"+
                                "<td><input value='"+(v.cardid||"")+"'></td>"+
                                "<td id='"+v.cardid+"'>"+"<button onclick='deleteUserByCardid(this)' " +
                            "type='button'>删除</button>"+"</td>"+
                            "</tr>"
                        )
                    })

                },
                error:function(result){
                    console.log(result)
                }
            });
        })
        $('#btn').click(function(){
            var id = $.trim($('#insertForm1').children('input[name=userId]').val());
            if(id===""){
                alert("id为空")
            }
            else{
                $.ajax({
                    url:'user/findOneAction',
                    data:{
                        id:$('input[name=userId]').val()
                    },
                    method:'post',
                    dataType:'json',
                    success:function(res){
                        if(res.length===0){
                            console.log("此用户不存在")
                        }
                    },
                    error:function(res){
                        console.log(res)
                    }
                })
            }
        })
        $('#btn1').click(function(){
            var data = {
                name:$.trim($('#insertForm2').children('input[name=userName]').val()),
                address:$.trim($('#insertForm2').children('input[name=userAddress]').val()),
                age:$.trim($('#insertForm2').children('input[name=userAge]').val()),
                icon:$.trim($('#insertForm2').children('input[name=userIcon]').val()),
                grade:$.trim($('#insertForm2').children('select[name=userGrade]').val()),
                cardid:$.trim($('#insertForm2').children('input[name=cardid]').val()),
                sex:$.trim($('#insertForm2').children('input[name=sex]').val()),
                creationTime:$.trim(new Date().getTime())
            }
            var flag = 0;
            $.map(data,function(v,i){
                if(v===""){
                    flag =1;
                }
            })
            if(data.cardid.length!=18){
                flag = 2
            }
            if(flag == 1){
                alert("不可以有信息为空")
            }
            else if(flag==2){
                alert("身份证号错误,必须18位")
            }
            else{
                $.ajax({
                    url:'user/addUserAction',
                    method:'post',
                    dataType:'json',
                    data:data,
                    success:function(res){
                        console.log(res)
                    },
                    error:function(res){
                        console.log(res)
                    }
                })
            }

        })
    })
    function deleteUserByCardid(btn){
        var cardid = $.trim($(btn).parent().attr("id"))
        console.log($(btn).find('tr'))
        $.ajax({
            url:'user/deleteUserByCardid',
            data:{
                cardid:cardid
            },
            method:'post',
            dataType:'json',
            success:function(res){
                $(btn).parents("tr").remove()
            },
            error:function(res){
                console.log(res)
            }
        })
    }
    function updateOneInfo(input){
        var data = {
            name:$(input).parents('tr').children(':eq(2)').children().val(),
            address:$(input).parents('tr').children(':eq(3)').children().val(),
            age:$(input).parents('tr').children(':eq(4)').children().val(),
            icon:$(input).parents('tr').children(':eq(5)').children().val(),
            grade:$(input).parents('tr').children(':eq(6)').children().val(),
            cardid:$(input).parents('tr').children(':eq(10)').children().val(),
            sex:$(input).parents('tr').children(':eq(9)').children().val(),
            creationTime:$(input).parents('tr').children(':eq(8)').children().val(),
            id:$(input).parents('tr').children(':eq(1)').children().val()
        }
        console.log(data)
        $.ajax({
            url:'user/updateOneInfoAction',
            data:data,
            method:'post',
            dataType:'json',
            success:function(res){
                console.log(res)
            },
            error:function(res){
                console.log(res)
            }
        })
    }
</script>